<template>
	<!-- 单图显示组件 -->
	<view class="imageThreeComponent">
		<view class="image_list" :style="[{'paddingTop': `${newData.pageUpspacing}rpx`,
                           'paddingBottom': `${newData.pageDownspacing}rpx`, 'paddingLeft': `${newData.pageLRspacing}rpx`,
						   'paddingRight': `${newData.pageLRspacing}rpx`}]">
			<view class="left" :style="[{'marginRight': `${newData.pageMiddlespacing/2}rpx`}]">
				<div-base-navigator :pageUrl="newData.leftPageUrl" style="background: #FFFFFF;">
					<image :src="newData.leftImageUrl" :style="[{'height':`${newData.height}rpx`}]" class="image"></image>
				</div-base-navigator>
			</view>
			<view class="right" :style="[{'marginLeft': `${newData.pageMiddlespacing/2}rpx`}]">
				<div-base-navigator :pageUrl="newData.rightTopPageUrl">
					<image :src="newData.rightTopImageUrl" :style="[{'height':`${newData.height}rpx`}]" class="image"></image>
				</div-base-navigator>
			</view>
		</view>
	</view>
</template>

<script>	
	const app = getApp();
	import divBaseNavigator from '../div-base/div-base-navigator.vue'
	export default {
		name: 'basic-image',
		props: {
			value: {
				type: Object,
				default: function() {
					return {
						leftImageUrl: ``,
						leftPageUrl: '',
						height: 100,
						rightBottomImageUrl: ``,
						rightTopImageUrl: '',
						rightTopPageUrl:''
					}
				}
			}
		},
		components: {
			divBaseNavigator
		},
		data() {
			return {
				theme: app.globalData.theme, //全局颜色变量
				newData: this.value
			};
		},
		mounted() {
		},
		methods: {}
	}
</script>

<style scoped lang="scss">
	.image_list {
		display: flex;
		// margin: 20rpx;
		margin-bottom: 0;

		.left {
			flex: 1;
			// margin-right:10rpx;

			.image {
				width: 100%;
				// height: 350rpx;
			}
		}

		.right {
			flex: 1;
			// margin-left: 10rpx;

			.image {
				width: 100%;
				// height: 350rpx;
			}

		}
	}
</style>
